<template>
  <div class="app-container" ref="appContainer">
    <el-form :model="queryBrand" ref="queryBrand" @submit.native.prevent :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="品牌名称">
        <el-input v-model="queryBrand.brandName" @keyup.enter.native="handleQuery"  placeholder="请输入品牌名称"></el-input>
      </el-form-item>
      <el-form-item>
        <e-button type="primary" icon="el-icon-search" @click="handleQuery">查询</e-button>
        <e-button icon="el-icon-refresh" @click="resetQuery">重置</e-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <e-button style="float: right; padding: 3px 0" type="text"
            v-hasPermi="['vehicleBrandList:vehicleBrandList:addBrand']"
            @click="addBrandNew">增加品牌</e-button>
          </div>
          <table-page :loading="brandLoading" :dataList="carBrandList" :total="brandTotal" :page.sync="queryBrand.pageNum"
            :limit.sync="queryBrand.pageSize" @setSizeCurrent="getCarBrandData" @rowClick="rowBrandName" border
            :small="true">
            <!-- 操作插槽 -->
            <template slot="tableColAc">
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <e-button size="mini" type="text" @click.stop="brandUpdate(scope.row)"
                    v-hasPermi="['vehicleBrandList:vehicleBrandList:editBrand']">编辑</e-button>
                  <e-button size="mini" type="text" @click.stop="brandOpen(scope.row, 1)"
                    v-show="scope.row.disabled == '0'" v-hasPermi="['vehicleBrandList:vehicleBrandList:enableBrand']">启用</e-button>
                  <e-button size="mini" type="text" @click.stop="brandOpen(scope.row, 0)"
                    v-show="scope.row.disabled == '1'" v-hasPermi="['vehicleBrandList:vehicleBrandList:serviceBrand']">停用</e-button>

                </template>
              </el-table-column>
            </template>
            <template slot="tableCol">
              <el-table-column label="品牌名称" align="center" prop="brandName" />

              <el-table-column label="启停用" align="center">
                <template slot-scope="scope">
                  <el-tag type="success" v-show="scope.row.disabled == '1'">已启用</el-tag>
                  <el-tag type="danger" v-show="scope.row.disabled == '0'">停用</el-tag>
                </template>
              </el-table-column>
            </template>
          </table-page>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>车辆品牌-{{ brandNameObj.brandName }}</span>
            <e-button style="float: right; padding: 3px 0" type="text"
            v-hasPermi="['vehicleBrandList:vehicleBrandList:addSeries']"
             @click="addSeriesNew">增加车系</e-button>
          </div>
          <table-page :loading="seriesLoading" :dataList="carSeriesList" :total="seriesTotal"
            :page.sync="querySeries.pageNum" :limit.sync="querySeries.pageSize" @setSizeCurrent="getCarSeriesData" border
            :small="true">
            <template slot="tableColAc">
              <el-table-column label="操作" align="center" fixed="left">
                <template slot-scope="scope">
                  <e-button size="mini" type="text" @click.stop="seriesUpdate(scope.row)"
                    v-hasPermi="['vehicleBrandList:vehicleBrandList:editSeries']">编辑</e-button>
                  <e-button size="mini" type="text" @click.stop="seriesOpen(scope.row, 1)"
                    v-show="scope.row.disabled == '0'" v-hasPermi="['vehicleBrandList:vehicleBrandList:enableSeries']">启用</e-button>
                  <e-button size="mini" type="text" @click.stop="seriesOpen(scope.row, 0)"
                    v-show="scope.row.disabled == '1'" v-hasPermi="['vehicleBrandList:vehicleBrandList:serviceSeries']">停用</e-button>

                </template>
              </el-table-column>

            </template>

            <template slot="tableCol">
              <el-table-column label="车系名称" align="center" prop="seriesName" />

              <el-table-column label="启停用" align="center">
                <template slot-scope="scope">
                  <el-tag type="success" v-show="scope.row.disabled == '1'">已启用</el-tag>
                  <el-tag type="danger" v-show="scope.row.disabled == '0'">停用</el-tag>
                </template>
              </el-table-column>
            </template>
          </table-page>
        </el-card>

      </el-col>

    </el-row>

    <!-- 增加品牌 -->
    <el-dialog :title="brandTitle" :visible.sync="brandDialog" width="500px" append-to-body :show-close="false"
      :close-on-press-escape="false">
      <el-form ref="brandForm" :model="brandForm" label-width="114px" :rules="rulesBrand">
<!--        <el-form-item label="品牌编号:" prop="brandId">-->
<!--          <el-input v-model="brandForm.brandId" placeholder="请输入品牌编号" maxlength="11" show-word-limit />-->
<!--        </el-form-item>-->
        <el-form-item label="品牌名称:" prop="brandName">
          <el-input v-model="brandForm.brandName" placeholder="请输入品牌名称" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="品牌首字母:" prop="brandInitial">
          <el-input v-model.trim="brandForm.brandInitial" placeholder="请输入品牌首字母" maxlength="1" show-word-limit />
        </el-form-item>
        <el-form-item label="品牌英文名称:" prop="nameEn">
          <el-input v-model="brandForm.nameEn" placeholder="请输入品牌英文名称" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="国家:" prop="country">
          <el-input v-model="brandForm.country" placeholder="请输入国家" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="品牌拼音:" prop="pinyin">
          <el-input v-model="brandForm.pinyin" placeholder="请输入品牌拼音" maxlength="100" show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <e-button :loading="butBrandLoading" type="primary" @click="submitBrand">确 定</e-button>
        <e-button @click="cancelBrand">取 消</e-button>
      </div>
    </el-dialog>
    <!-- 增加车系 -->
    <el-dialog :title="seriesTitle" :visible.sync="seriesDialog" width="500px" append-to-body :show-close="false">
      <el-form ref="seriesForm" :model="seriesForm" label-width="110px" :rules='rulesSeries'>
        <el-form-item label="品牌名称:" prop="brandName">
          <el-input v-model="seriesForm.brandName" placeholder="请输入品牌名称" disabled />
        </el-form-item>
        <el-form-item label="车系名称:" prop="seriesName">
          <el-input v-model="seriesForm.seriesName" placeholder="请输入车系名称" />
        </el-form-item>
        <el-form-item label="车系组名称:" >
          <el-select v-model="seriesForm.seriesGroupId" filterable placeholder="请选择车系组名称" @change="seriesGroupChange"
            style="width:100%">
            <el-option :label="i.seriesGroupName" :value="i.id" v-for="i in seriesGroupList" :key="i.id"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="车系级别:" prop="seriesLevel">
          <el-input v-model="seriesForm.seriesLevel" placeholder="请输入车系级别" />
        </el-form-item>

        <el-form-item label="厂商名称:" prop="makerName">
          <el-input v-model="seriesForm.makerName" placeholder="请输入厂商名称" />
        </el-form-item>
        <el-form-item label="制造商类型:" >
          <el-input v-model="seriesForm.makerType" placeholder="请输入制造商类型" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <e-button :loading="butSeriesLoading" type="primary" @click="submitSeries">确 定</e-button>
        <e-button @click="cancelSeries">取 消</e-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCarBrandList, getCarSeriesList, addBrand, updateBrand, addSeries, updateSeries, getSeriesGroupList } from "@/api/zcwh/vehicleBrandApi.js";
import { getToken } from "@/utils/auth";

export default {
  name: "VehicleBrandList",
  components: {
  },
  data() {
    return {
      tabHight:0,
      // 显示搜索条件
      showSearch: true,
      // 列表数据
      seriesGroupList: [],
      brandNameObj: {},
      brandTotal: 0,
      seriesTotal: 0,
      brandLoading: false,
      seriesLoading: false,
      carBrandList: [],
      carSeriesList: [],
      brandForm: {
        brandId: "",
        brandName: "",
        brandInitial: "",
        nameEn: "",
        country: "",
        pinyin: "",
        id: ""

      },
      seriesForm: {
        brandId: "",
        brandName: "",
        seriesId: "",
        seriesName: "",
        seriesGroupName: "",
        seriesGroupId: "",
        seriesLevel: "",
        makerId: "",
        makerName: "",
        makerType: "",

        id: ""

      },
      // 弹出层标题
      brandTitle: "",
      seriesTitle: "",
      // 是否显示弹出层
      brandDialog: false,
      seriesDialog: false,
      butBrandLoading: false,
      butSeriesLoading: false,
      // 查询参数
      queryBrand: {
        pageNum: 1,
        pageSize: 10,
        brandName: "",
      },
      querySeries: {
        pageNum: 1,
        pageSize: 10,
        carBrandId: "",
      },

      // 品牌校验
      rulesBrand: {
        brandId: [
          { required: true, message: "请输入品牌编号", trigger: "blur" }
        ],
        brandName: [
          { required: true, message: "请输入品牌名称", trigger: "blur" }
        ],
        brandInitial: [
          { required: true, message: "请输入品牌首字母", trigger: "blur" }
        ],
        nameEn: [
          { required: true, message: "请输入品牌英文名称", trigger: "blur" }
        ],
        country: [
          { required: true, message: "请输入国家", trigger: "blur" }
        ],
        pinyin: [
          { required: true, message: "请输入品牌拼音", trigger: "blur" }
        ],

      },
      // 车系校验
      rulesSeries: {
        seriesName: [
          { required: true, message: "请输入车系名称", trigger: "blur" }
        ],
        seriesGroupId: [
          { required: true, message: "请选择车系组名称", trigger: "change" }
        ],
        seriesLevel: [
          { required: true, message: "请输入车系级别", trigger: "blur" }
        ],
        makerName: [
          { required: true, message: "请输入厂商名称", trigger: "blur" }
        ],
        makerType: [
          { required: true, message: "请输入制造商类型", trigger: "blur" }
        ],
      },
    };
  },
  created() {

  },
  mounted() {
    this.getCarBrandData();

  },
  methods: {
    // 获取车系组
    getSeriesGroup(obj) {
      getSeriesGroupList(obj).then((res) => {
        // this.seriesGroupList = res.map((v) => {
        //   if (typeof v.id === 'number') {
        //     v.id == `${v.id}`
        //   }
        //
        //   return v
        // })
          this.seriesGroupList=res;

      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryBrand.pageNum = 1;
      this.getCarBrandData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryBrand')
      this.queryBrand.brandName = ""
      this.queryBrand.pageNum = 1
      this.handleQuery();
    },
    getCarBrandData() {
      this.brandLoading = true;
      getCarBrandList(this.queryBrand).then(res => {
        if (res.code == "200") {
          const { rows, total } = res
          this.carBrandList = rows
          this.brandTotal = total
          this.brandNameObj = rows.length > 0 ? rows[0] : {}
          if (this.brandNameObj && rows.length > 0) {
            this.querySeries.carBrandId = rows[0].id
            this.querySeries.pageNum = 1
            this.getCarSeriesData()
            this.getSeriesGroup({ brandName: this.brandNameObj.brandName, carBrandId: this.brandNameObj.id })
          } else {
            this.carSeriesList = []
            this.seriesTotal = 0
          }

          this.brandLoading = false;

        } else {
          this.carBrandList = []
          this.brandTotal = 0
          this.carSeriesList = []
          this.seriesTotal = 0
        }
      })
    },
    getCarSeriesData() {

      this.seriesLoading = true;
      getCarSeriesList(this.querySeries).then(res => {
        if (res.code == "200") {
          const { rows, total } = res

          this.carSeriesList = this.brandTotal > 0 ? rows : []
          this.seriesTotal = this.brandTotal > 0 ? total : 0
          this.seriesLoading = false;

        } else {

          this.carSeriesList = []
          this.seriesTotal = 0
          this.seriesLoading = false;

        }
      })
    },

    rowBrandName(row, column, event) {
      this.brandNameObj = row
      this.querySeries.carBrandId = row.id
      this.getCarSeriesData()
      this.getSeriesGroup({ brandName: this.brandNameObj.brandName, carBrandId: this.brandNameObj.id })
    },

    // 品牌操作
    addBrandNew() {
      this.brandDialog = true
      this.brandTitle = "新增品牌"
      this.brandForm.brandId = ""
      this.brandForm.brandName = ""
      this.brandForm.brandInitial = ""
      this.brandForm.nameEn = ""
      this.brandForm.country = ""
      this.brandForm.pinyin = ""
      this.brandForm.id = ""
      this.brandForm.operType = "新增"
    },


    brandUpdate(row) {
      this.brandDialog = true
      this.brandTitle = "编辑品牌"
      this.brandForm.brandId = row.brandId
      this.brandForm.brandName = row.brandName
      this.brandForm.brandInitial = row.brandInitial
      this.brandForm.nameEn = row.nameEn
      this.brandForm.country = row.country
      this.brandForm.pinyin = row.pinyin
      this.brandForm.id = row.id
      this.brandForm.operType = "编辑"

    },
    brandOpen(row, num) {
      this.brandLoading = true
      this.$modal.confirmCenter(`是否${num == 1 ? '启用' : '停用'}`, "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        showClose: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '确定';

            updateBrand({ disabled: num, id: row.id }).then(res => {
              if (res.code == "200") {
                this.$message(res.msg);
                instance.confirmButtonLoading = false;
                done();
              } else {
                this.$message(res.msg);
                // this.brandLoading = false
                instance.confirmButtonLoading = false;
                done();
              }
            })

          } else {
            this.brandLoading = false
            done();
          }
        }
      }).then((action) => {
        this.handleQuery()
      }).catch(() => {

      })
    },

    submitBrand() {
      this.$refs["brandForm"].validate(valid => {
        if (valid) {
          this.butBrandLoading = true
          if (this.brandForm.id == "") {
            addBrand(this.brandForm).then(res => {

              if (res.code == "200") {
                this.handleQuery()
                this.$message(res.msg);
                this.butBrandLoading = false
                this.brandDialog = false
              } else {
                this.$message(res.msg);
                this.butBrandLoading = false
              }
            })
          } else {
            updateBrand(this.brandForm).then(res => {

              if (res.code == "200") {
                this.handleQuery()
                this.$message(res.msg);
                this.butBrandLoading = false
                this.brandDialog = false
              } else {
                this.$message(res.msg);
                this.butBrandLoading = false
              }
            })
          }

        }
      });



    },
    cancelBrand() {
      this.$refs['brandForm'].resetFields();
      this.brandDialog = false

    },
    // 车系操作
    seriesGroupChange(val) {
      if (val) {
        this.seriesGroupList.forEach(v => {
          if (v.id == val) {
            this.seriesForm.seriesGroupName = v.seriesGroupName
          }
        })
      } else {
        this.seriesForm.seriesGroupName = ""
      }
    },
    addSeriesNew() {

      this.seriesDialog = true
      this.seriesTitle = "新增车系"
      this.seriesForm.brandId = ""
      this.seriesForm.brandName = this.brandNameObj.brandName
      this.seriesForm.seriesId = ""
      this.seriesForm.seriesName = ""
      this.seriesForm.seriesGroupName = ""
      this.seriesForm.seriesGroupId = ""
      this.seriesForm.seriesLevel = ""
      this.seriesForm.makerName = ""
      this.seriesForm.makerType = ""
      this.seriesForm.makerId = ""
      this.seriesForm.id = ""
      this.seriesForm.operType = "新增"
      this.seriesForm.carBrandId = this.brandNameObj.id
    },

    seriesUpdate(row) {

      this.seriesDialog = true
      this.seriesTitle = "编辑车系"
      this.seriesForm.brandId = row.brandId
      this.seriesForm.brandName = row.brandName

      this.seriesForm.seriesId = row.seriesId
      this.seriesForm.seriesName = row.seriesName
      this.seriesForm.seriesGroupName = row.seriesGroupName
      // this.seriesForm.seriesGroupId = `${row.seriesGroupId}`
      this.seriesForm.seriesGroupId = row.seriesGroupId
      this.seriesForm.seriesLevel = row.seriesLevel
      this.seriesForm.makerName = row.makerName
      this.seriesForm.makerType = row.makerType
      this.seriesForm.makerId = row.makerId
      this.seriesForm.id = row.id
      this.seriesForm.operType = "编辑"
      this.seriesForm.carBrandId = row.carBrandId
    },
    seriesOpen(row, num) {
      this.seriesLoading = true
      this.$modal.confirmCenter(`是否${num == 1 ? '启用' : '停用'}`, "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        showClose: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '确定';
            updateSeries({ disabled: num, id: row.id }).then(res => {
              if (res.code == "200") {
                this.$message(res.msg);
                instance.confirmButtonLoading = false;
                done();
              } else {
                this.$message(res.msg);
                // this.brandLoading = false
                instance.confirmButtonLoading = false;
                done();
              }
            })
          } else {
            this.seriesLoading = false
            done();
          }
        }
      }).then((action) => {
        this.getCarSeriesData()
      }).catch(() => {

      })


    },

    submitSeries() {
      this.$refs["seriesForm"].validate(valid => {
        if (valid) {
          this.butSeriesLoading = true
          if (this.seriesForm.id == "") {
            addSeries(this.seriesForm).then(res => {

              if (res.code == "200") {
                this.getCarSeriesData()
                this.$message(res.msg);
                this.butSeriesLoading = false
                this.seriesDialog = false
              } else {
                this.$message(res.msg);
                this.butSeriesLoading = false
              }
            })
          } else {
            updateSeries(this.seriesForm).then(res => {

              if (res.code == "200") {
                this.getCarSeriesData()
                this.$message(res.msg);
                this.butSeriesLoading = false
                this.seriesDialog = false
              } else {
                this.$message(res.msg);
                this.butSeriesLoading = false
              }
            })
          }
        }
      })

    },
    cancelSeries() {
      this.$refs['seriesForm'].resetFields();
      this.seriesDialog = false

    },

  }
};
</script>
<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 12px 0px;
}
</style>
